import React, { useState, useEffect } from 'react'
import { useDidShow } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtNoticebar, AtTabs, AtTabsPane, AtCard, AtActivityIndicator } from 'taro-ui'
import { useSelector, useDispatch } from "react-redux";
import './index.scss'
export default () => {
    const dispatch = useDispatch();
    const { list, noticeType } = useSelector((state) => state.message);
    const loading = useSelector(store => store.loading);
    const [current, setCurrent] = useState(0);
    const tabList = [{ title: '公告', noticeType: 1 }, { title: '通知', noticeType: 2 }]
    useDidShow(() => {
        dispatch(
            {
                type: 'message/questMassage',
            }
        )
    })
    console.log("list", list)
    const handleClick = (val) => {
        console.log(tabList[val])
        setCurrent(val)
        dispatch(
            {
                type: 'message/overrideStateProps',
                payload: {
                    noticeType: tabList[val].noticeType
                }
            }
        )
        dispatch(
            {
                type: 'message/questMassage',
            }
        )
    }
    const notice = `${list[0]?.noticeTitle || ''}  ${list[0]?.createBy || ''}  ${list[0]?.createTime || ''}`;
    return (
        <>
            <AtActivityIndicator isOpened={loading.effects['message/questMassage']} mode='center' size={32} content='加载中...'></AtActivityIndicator>
            < View className='index' >
                <AtNoticebar marquee icon='volume-plus'>
                    {notice}
                </AtNoticebar>
                <AtTabs current={current} tabList={tabList} onClick={handleClick}>
                    <AtTabsPane current={current} index={0} >
                        {list.length > 0 ? list?.map(item => {
                            return <AtCard
                                note={item.createTime}
                                extra={`${item.createBy}`}
                                title={item.noticeTitle}
                                style={{ marginTop: '2px' }}
                                key={item.mesId}
                            >
                                {item.content}
                            </AtCard>
                        }) : null}
                    </AtTabsPane>
                    <AtTabsPane current={current} index={1}>
                        {list.length > 0 ? list?.map(item => {
                            return <AtCard
                                note={item.createTime}
                                extra={`${item.createBy} `}
                                title={item.noticeTitle}
                                style={{ marginTop: '2px' }}
                                key={item.mesId}
                            >
                                {item.content}
                            </AtCard>
                        }) : null}
                    </AtTabsPane>
                </AtTabs>
            </View>
        </>
    )
}